.fade-enter-active {
  transition: all .3s;
}
.fade-enter-from {
  transform: translate3d(0, 10%, 0);
  opacity: 0;
}

/* 高度变化 */
.heightZero-enter-active,
.heightZero-leave-active {
  transition: all .3s;
  overflow: hidden;
}

.heightZero-enter-from,
.heightZero-leave-to {
  max-height: 0em !important;
}

.heightZero-enter-to,
.heightZero-leave-from {
  max-height: 25em !important;
}

/* 宽度变化 */
.widthZero-enter-active,
.widthZero-leave-active {
  transition: all .3s ease;
  overflow: hidden;
  white-space: nowrap;
  overflow: hidden;
}

.widthZero-enter-from,
.widthZero-leave-to {
  max-width: 0em;
}

.widthZero-enter-to,
.widthZero-leave-from {
  max-width: 10em;
}

/* 透明度 */
.opacity-enter-active,
.opacity-leave-active {
  transition: all .2s;
}

.opacity-enter-from,
.opacity-leave-to {
  opacity: 0;
}

.opacity-enter-to,
.opacity-leave-from {
  opacity: 1;
}

/* 从左进入 */
.fromRight-enter-active,
.fromLeft-enter-active{
  transition: all .3s;
  overflow: hidden;
}
.fromRight-leave-active,
.fromLeft-leave-active  {
  transition: all .2s;
  overflow: hidden;
}
.fromRight-enter-from,
.fromLeft-leave-to {
  transform: translateX(10%);
  opacity: 0;
}
.fromRight-leave-to ,
.fromLeft-enter-from{
  transform: translateX(-10%);
  opacity: 0;
}

.fromRight-enter-to,
.fromRight-leave-from,
.fromLeft-enter-to,
.fromLeft-leave-from {
  transform: translateX(0%);
  opacity: 1;
}


/* 从右侧进入 */
.fromRightToRight-enter-active,
.fromRightToRight-leave-active {
  transition: all .3s;
  overflow: hidden;
}

.fromRightToRight-enter-from,
.fromRightToRight-leave-to {
  transform: translateX(100%) !important;
}

.fromRightToRight-enter-to,
.fromRightToRight-leave-from {
  transform: translateX(0%) !important;
}
/* 从左侧进入 */

.fromLeftToLeft-enter-active,
.fromLeftToLeft-leave-active {
  transition: all .3s;
  overflow: hidden;
}

.fromLeftToLeft-enter-from,
.fromLeftToLeft-leave-to {
  transform: translateX(-100%) !important;
}

.fromLeftToLeft-enter-to,
.fromLeftToLeft-leave-from {
  transform: translateX(0%) !important;
}
@keyframes shake {

  40%,
  80% {
    transform: translateX(-5%);
  }

  20%,
  60% {
    transform: translateX(5%);
  }

  0%,
  100% {
    transform: translateX(0%);
  }
}